<template>
  <div>
    <search-list
      ref="userOrderList"
      :api-url="$url.UserOrderList"
      :option="searchOpt"
      :itemPerRow="8"
      :beforeQuery="beforeQuery"
    >
      <el-table-column prop="orderId" label="订单编号"></el-table-column>
      <el-table-column prop="orderStatus" label="订单状态">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['mallOrderStatusSl'](scope.row.orderStatus).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="platform" label="订单来源">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['orderComeSl'](scope.row.platform).label || scope.row.platform }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="productType" label="订单类型">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['productTypeSl'](scope.row.productType).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="showPayAmount" label="实付金额"></el-table-column>
      <el-table-column prop="payType" label="支付方式">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['payTypeSl'](scope.row.payType).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="productId" label="产品id"></el-table-column>
      <el-table-column prop="productTitle" label="产品标题"></el-table-column>
      <el-table-column prop="showTotalAmount" label="订单总金额"></el-table-column>
      <el-table-column prop="showDiscountAmount" label="折扣金额"></el-table-column>
      <el-table-column prop="couponAmount" label="优惠券抵扣金额"></el-table-column>
      <el-table-column prop="uid" label="UUID"></el-table-column>
      <el-table-column prop="nickname" label="昵称"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="createdAt" label="下单时间"></el-table-column>

      <div slot="btn-after" class="btn-after">
        <el-button type="success" icon="el-icon-download" @click="downloadExcel">导出Excel</el-button>
      </div>
    </search-list>
  </div>
</template>

<script>
  import CustomSelectData from '@/config/CustomSelectData';
  export default {
    data() {
      return {
        isOne: true,
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'orderId',
            label: '订单编号',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'productId',
            label: '产品id',
          },
          {
            type: 'mallOrderStatusSl',
            name: 'orderStatus',
            label: '订单状态',
            $attrs: {
              multiple: true,
            },
          },
          {
            type: 'orderComeSl',
            name: 'platform',
            label: '订单来源',
          },
          {
            type: 'productTypeSl',
            name: 'productType',
            label: '订单类型',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_DATEPICKER,
            name: 'updatedAt',
            label: '创建时间',
            conf: {
              type: 'datetimerange',
              format: 'yyyy-MM-dd HH:mm:ss',
              'value-format': 'yyyy-MM-dd HH:mm:ss',
              'start-placeholder': '开始时间',
              'end-placeholder': '结束时间',
            },
          },
        ],
      };
    },
    methods: {
      // 导出Excel
      downloadExcel(){
        let _ = this.$refs.userOrderList.s_searchInfo
        if(_.startTime || _.endTime){
          this.$service.UserOrderListDownload(_, { responseType: 'blob' }).then((res) => {
            var blob = new Blob([res], { type: 'application/vnd.ms-excel' });
            let url = window.URL.createObjectURL(blob);
            let el = document.createElement('a');
            document.body.appendChild(el);
            el.href = url;
            el.download = '订单列表' + '.xlsx';
            el.click();
            window.URL.revokeObjectURL(url);
          });
        }else{
          this.$message.warning('请筛选具体时间段订单后再导出')
        }
      },
      beforeQuery({ searchInfo }) {
        if (searchInfo.updatedAt === null) {
          searchInfo.startTime = '';
          searchInfo.endTime = '';
        } else {
          searchInfo.startTime = searchInfo.updatedAt[0];
          searchInfo.endTime = searchInfo.updatedAt[1];
        }
        // 第一次的时候为已支付(已发货)，也就是待收货
        if (this.isOne) {
          searchInfo.orderStatus =
            CustomSelectData.mallOrderStatusSl[8].value +
            ',' +
            CustomSelectData.mallOrderStatusSl[1].value +
            ',' +
            CustomSelectData.mallOrderStatusSl[2].value;
        }
        this.isOne = false;
      },
    },
  };
</script>
<style lang="less" scoped></style>
